@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
  }

  body {
    @apply antialiased text-gray-800 bg-gray-50;
  }
}

@layer components {
  .app-container {
    @apply max-w-2xl mx-auto min-h-screen bg-white shadow-xl;
    max-height: 100vh;
    height: 100vh;
  }

  .page-header {
    @apply flex items-center px-4 py-3 bg-white border-b border-gray-100 sticky top-0 z-30;
    height: 3rem;
  }

  .page-header button {
    @apply mx-0.5;
  }

  .page-content {
    @apply flex-1 overflow-y-auto;
    height: calc(100vh - 6rem);
    scroll-behavior: smooth;
  }

  .chat-input {
    @apply bg-white border-t border-gray-100;
  }

  .chat-input-field {
    @apply bg-gray-50 rounded-full px-4 py-2 border border-gray-200 focus-within:border-gray-400 transition-colors;
  }

  .chat-message {
    @apply text-gray-800;
  }

  .user-message {
    @apply bg-blue-50 border border-blue-100 rounded-2xl shadow-sm;
  }

  .bot-message {
    @apply bg-gray-50 border border-gray-100 rounded-2xl shadow-sm;
  }

  .message-actions {
    @apply flex items-center justify-end gap-2 mt-2;
  }

  .message-action-button {
    @apply p-1.5 rounded-lg bg-gray-100/80 hover:bg-gray-200/80 text-gray-500 transition-colors;
  }

  .message-action-group {
    @apply flex items-center bg-gray-100/80 rounded-lg;
  }

  .prose {
    @apply text-gray-800;
  }

  .prose code {
    @apply text-sm bg-gray-50 px-1 py-0.5 rounded;
  }

  .prose pre {
    @apply bg-gray-50 p-3 rounded-lg overflow-x-auto;
  }

  .prose pre code {
    @apply bg-transparent p-0;
  }

  .prose h1 {
    @apply text-2xl font-bold mb-4;
  }

  .prose h2 {
    @apply text-xl font-bold mb-3;
  }

  .prose h3 {
    @apply text-lg font-bold mb-2;
  }

  .prose p {
    @apply mb-4 last:mb-0;
  }

  .prose ul {
    @apply list-disc pl-5 mb-4;
  }

  .prose ol {
    @apply list-decimal pl-5 mb-4;
  }

  .prose li {
    @apply mb-1;
  }

  .prose table {
    @apply w-full mb-4 border-collapse;
  }

  .prose th,
  .prose td {
    @apply border border-gray-200 px-3 py-2;
  }

  .prose th {
    @apply bg-gray-50;
  }

  /* Smooth scrolling for the entire page */
  * {
    scroll-behavior: smooth;
  }

  /* Custom scrollbar styles */
  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-300;
  }
}